<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'应急资源管理 '"
      :secondTitles="['应急物资管理','']"
      :slotWidth="[50, 50]"
    >
      <template #left>
        <div style="font-size: 20px">
          <img src="../../../../assets/image/jianshe/title.png" alt="" />
          物资点位数量
        </div>
        <div class="w-100 h-100" style="display: flex">
          <div class="yhcl" style="width: 30%">
            <div
              class="item"
              :style="{
                background: `url(${bg}) no-repeat center center`,
                backgroundSize: '100% auto',
              }"
            >
              <div class="value">129个</div>
              <div class="name">总数</div>
            </div>
          </div>
          <div
          class="w-100 h-90 autoscoll"
          style="overflow: auto; overflow-y: hidden"
        >
          <div style="width: 1200px;height: 100%;">
            <h_normal
              :echartsId="'dianweishuliang'"
              :echarts-data="echartsData"
              :derection="'h'"
              :unit="''"
              yName="个"
              :label-rotate="false"
              :rotateAngle="30"
              :barWidth="'40%'"
            ></h_normal>
          </div>
          </div>
        </div>
      </template>
      <template #middle>
        <div style="font-size: 20px;padding-top:39px">
          <img src="../../../../assets/image/jianshe/title.png" alt="" />
          物资数量
        </div>
        <div class="w-100 h-100">
          <wzsl></wzsl>
        </div>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang='ts'>
import containTemplete from "@/components/project/containTemplete.vue";
import h_normal from "@/components/common/echart/h_nomal.vue";
import bg from "@/assets/image/yingjizhihui/wzdw.png";
import wzsl from "./wzsl.vue";

const echartsData = ref();
onBeforeMount(() => {
  echartsData.value = [
    {
      name: "建桥街道",
      value: 33,
    },
    {
      name: "晴川街道",
      value: 45,
    },
    {
      name: "鹦鹉街道",
      value: 65,
    },
    {
      name: "五里墩街道",
      value: 87,
    },
    {
      name: "建桥街道",
      value: 100,
    },
    {
      name: "晴川街道",
      value: 40,
    },

  ];
});
</script>

<style scoped lang="less" >
.yhcl {
  .value {
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 28px;
  }
  .item {
    height: 100%;
    flex: 1;
    margin: 0 28px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
  }
  .name {
    margin-top: 180px;
    font-size: 24px;
  }
}
</style>